<%--
  Created by IntelliJ IDEA.
  User: qqsch
  Date: 2019/3/8
  Time: 9:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>上传图片DEMO</title>
    <link rel="stylesheet" type="text/css" href="/src/webapp/css/common.css"/>
    <script type="text/javascript" src="/src/webapp/js/jquery-1.11.1.js"></script>.
    <script type="text/javascript">
        $(function () {
           $(".thumbs a").click(function(){
               var largePath = $(this).attr("href");
               var largeAlt = $(this).attr("title");
               $("#largeImg").attr({
                   src: largePath,
                   alt: largeAlt
               });
               return false;
           }) ;

            $("#myfileII").change(function () {
                $("#previewImgII").attr("src", "file:///" + $("#myfileII").val());
            });

            var la = $("#large");
            la.hide();

            $("#previewImgII").mousemove(function (e) {
                la.css({
                    top: e.pageY,
                    left: e.pageX
                }).html('<img src="' + this.src + '"/>').show();
            }).mouseout(function () {
                la.hide();
            });

        });

        function showPreview(obj) {
            var str = obj.value;
            document.getElementById("previewImg").innerHTML = "<img src = '" + str + "' />";
        }
        

    </script>
</head>
<body>
<%--js方式--%>
<form action="">
    请选择图片：<input id="myfile" name="myfile" type="file" onchange="showPreview(this)"/>
    <div id="previewImg"></div>
</form>
<hr>
<%--JQuery实现--%>
<img id="previewImgII" src="/src/webapp/images/preview.jpg" width="80" height="80"/>
<form action="">
    请选择图片：<input id="myfileII" name="myfileII" type="file" onchange="showPreview(this)"/>
</form>
<div id="large">

</div>
<hr>
<h2>图片</h2>
<p><img id="largeImg" src="/src/webapp/images/img1-lg.jpg" alt="Large Image"></p>
<p class="thumbs">
    <a href="/src/webapp/images/img2-lg.jpg" title="Image2"><img src="/src/webapp/images/img2-thumb.jpg"></a>
    <a href="/src/webapp/images/img3-lg.jpg" title="Image3"><img src="/src/webapp/images/img3-thumb.jpg"></a>
    <a href="/src/webapp/images/img4-lg.jpg" title="Image4"><img src="/src/webapp/images/img4-thumb.jpg"></a>
    <a href="/src/webapp/images/img5-lg.jpg" title="Image5"><img src="/src/webapp/images/img5-thumb.jpg"></a>
    <a href="/src/webapp/images/img6-lg.jpg" title="Image6"><img src="/src/webapp/images/img6-thumb.jpg"></a>
</p>
</body>
</html>
